<include file="public@header"/>

</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a href="{:url('Statistical/allStudents')}">学员统计</a></li>
    </ul>
    <form class="well form-inline margin-top-20 row" method="post" action="{:url('Statistical/allStudents')}">
        <label class="form-group col-lg-5 col-md-6">
            学校-班级：
            <select class="form-control" name="school_id" id="school_id" style="width:179px;">
                <option value='0'>全部</option>
                <notempty name="school">
                    <volist name="school" id="vo">
                        <if condition="isset($param.school_id) && $param.school_id == $vo.id">
                            <option value="{$vo.id}" selected>{$vo.name}</option>
                            <else/>
                            <option value="{$vo.id}">{$vo.name}</option>
                        </if>
                    </volist>
                </notempty>
            </select> -
            <select class="form-control" name="class_id" id="class_id" style="width:179px;">
                <option value='0'>全部</option>
                <notempty name="class">
                    <volist name="class" id="vo">
                        <if condition="isset($param.class_id) && $param.class_id == $vo.id">
                            <option value="{$vo.id}" selected>{$vo.name}</option>
                            <else/>
                            <option value="{$vo.id}">{$vo.name}</option>
                        </if>
                    </volist>
                </notempty>
            </select>
        </label>

        <label class="form-group col-lg-4 col-md-3" >
            课程：
            <select class="form-control" name="course_id" id="course_id" >
                <option value='0'>全部</option>
                <notempty name="course">
                    <volist name="course" id="vo">
                        <if condition="isset($param.course_id) && $param.course_id == $vo.id">
                            <option value="{$vo.id}" selected>{$vo.course_name}</option>
                            <else/>
                            <option value="{$vo.id}">{$vo.course_name}</option>
                        </if>
                    </volist>
                </notempty>
            </select>
        </label>

        <label class="form-group col-lg-5 col-md-6">
            报班时间：
            <input class="form-control" type="text" name="start" value="{$param.start|default=''}" placeholder="年/月/日">
            -
            <input class="form-control" type="text" name="end" value="{$param.end|default=''}" placeholder="年/月/日">
        </label>

        <label class="col-md-3 col-sm-6 form-group">
            <input type="submit"  class="btn btn-primary" value="搜索"/>
            <a class="btn btn-danger" href="{:url('Statistical/allStudents')}">清空</a>
        </label>
    </form>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="max-width:1200px;height:400px;" class="center-block"></div>

<!--table-->
<div id="table" class="row col-lg-8 center-block">
    <table class="table table-bordered h4">
        <tr>
            <th>{$legend}</th>
            <th>报名人数</th>
            <th>预留人数</th>
            <th>满员人数</th>
            <th>招生率</th>
        </tr>
        <notempty name="data">
            <volist name="data" id="vo">
                <tr>
                    <td class='col-md-3 right-align'>{$vo.name}</td>
                    <td>{$vo.in_total}</td>
                    <td>{$vo.rs_total}</td>
                    <td>{$vo.student_nums}</td>
                    <td>{$vo.per_ratio}</td>
                </tr>
            </volist>
        </notempty>
        <tr>
            <td class='col-md-3 right-align'>已报名总数</td>
            <td>{$value}</td>
        </tr>
        <tr>
            <td class='col-md-3 right-align'>招生总数</td>
            <td>{$student_total}</td>
        </tr>
        <tr>
            <td class='col-md-3 right-align'>总招生率</td>
            <td>{$ratio}</td>
        </tr>
    </table>
    <div style="color: red; margin-bottom: 20px;"><i>招生率 = 已报名总人数 ÷ 招生人数 × 100%</i></div>
</div>


<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript" src="__STATIC__/js/echarts.js"></script>

<script type="text/javascript">
    $('input[name="start"]').datepicker();
    $('input[name="end"]').datepicker();

    $(document).ready(function () {
        //搜索栏根据学校选择班级
        $('#school_id').on('change',function () {
            var sid = $(this).val();
            if(sid == 0){
                $('#class_id').empty();
                var html = '<option value=\"0\">全部</option>';
                $('#class_id').html(html);
                return false;
            }
            $.ajax({
                url:"{:url('classes/Classes/ajax_class')}",
                type:'post',
                dataType:'json',
                data:{"school_id":sid},
                success:function(jsonData){
                    $('#class_id').empty();
                    var html = '<option value=\"0\">全部</option>';

                    if(jsonData.code == 1){
                        for(var i in jsonData.data){
                            html += '<option value=\"'+jsonData.data[i].id+'\">'+jsonData.data[i].name+'</option>';
                        }
                    }
                    $('#class_id').html(html);
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    console.log('xhr='+XMLHttpRequest.readyState+' status='+textStatus+' error='+errorThrown);
                }
            });
        });
    });

    /***************** 统计分析表 ********************/
    var data = '{$json_data}';
    var legend_name = '{$legend}';//图例
    data = JSON.parse(data);//转换为json对象
    var category_name = [];//类目坐标
    var ratio = [];//数值坐标

    for(var i in data)
    {
        category_name.push(data[i].name);
        if(data[i].total === 0){
            ratio.push(0);
        }else{
            ratio.push(data[i].total);
        }
    }

    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //配置项
    var option = {
        title: {
            text: '学员报名统计分析',
            x: 'center'
        },
        tooltip: {
            type: 'axis',
            axisPointer:{
                type: 'cross'
            }
        },
        legend: {
            orient: 'horizontal',
            left: 'left',
            data: ['人数']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {
                    type:'jpeg',
                    pixelRatio:2
                }
            }
        },
        xAxis: {
            name: legend_name,
            type: 'category',
            axisLabel: {
                rotate: 0
            },
            data: category_name
        },
        yAxis: {
            name: '人数',
            type: 'value'
        },
        series: [{
            name: legend_name,
            type: 'bar',
            label:{
                normal:{
                    show: true,
                    position: 'top',
                    textStyle:{
                        color: 'blue',
                        fontStyle: 'italic'
                    }
                }
            },
            data: ratio
        }]
    };

    //使用指定的配置项和数据显示图表
    myChart.setOption(option);
</script>
</body>
</html>